<!DOCTYPE html>
<head xmlns:v-bind="http://www.w3.org/1999/xhtml" >
    <meta charset="UTF-8">
    <title>demo12表单-复选框和单选框</title>
  <script src="./js/vue.min.js"></script>

</head>

<body>
   <div id="app">
     <p> 单选框</p>
     <input  id="checkbox" type="checkbox" v-model="checked" >
     <label for="checkbox">{{checked}}</label>
     <p>多个复选框：</p>
     <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
     <label for="runoob">Runoob</label>
     <input type="checkbox" id="google" value="Google" v-model="checkedNames">
     <label for="google">Google</label>
     <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
     <label for="taobao">Taobao</label>
     <br/>
     <span>选择的值为:{{checkedNames}}</span>
   </div>

</body>

<script type="application/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      checked: false,
      checkedNames: []
    }
  });

</script>
</html>
